<template>
  <div>
    <!-- <my-form-com :options="options" :onCancel="()=>{}" :onOk="onOk"></my-form-com> -->

    <my-form :options="options" :onCancel="()=>{}" :onOk="onOk" :isReadOnly="true" :formData="formData"></my-form>
  </div>
</template>

<script>

export default {
  name: 'HelloWorld',
  data() {
    return {
      options: [
        {
          componentType: 'input',
          fieldType: 'domain',
          keyName: 'info|domain'
        },

        [
          {
            componentType: 'input',
            fieldType: 'ip',
            label: 'IP',
            keyName: 'info|IP', // required
            defaultValue: '192.1.1.1',
            isRequired: true
          },
          {
            componentType: 'select',
            label: '区域',
            keyName: 'region',
            defaultValue: 'beijing',
            options: [
              { label: '上海', value: 'shanghai' },
              { label: '北京', value: 'beijing' }
            ],
            rules: [
              { required: true, message: '域名不可为空', trigger: 'blur' }
            ] // optional
          }
        ]
      ],

      formData: {
        info : {
          domain : 'www.baidu.com',
          IP: '1.1.1.1'
        },
        region: 'shanghai'
      }
    };
  },
  components: {
  },
  methods: {
    onOk(a, b) {
      console.log(a, b);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
